<script setup lang="ts">
import { ref } from 'vue';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const onClickLeft = () => {
    history.back()
}

defineProps({
    title:{
        type:String,
        default:'标题'
    },
    visible:{
        type:Boolean,
        default:false
    },
    visib:{
        type:Boolean,
        default:true
    }
})

const showPopover = ref(false)

const actions = [
    { text: '首页',icon:'home-o',path:'/home',disabled:route.path=='/home'},
    { text: '购物车',icon:'cart-o',path:'/cart',disabled:route.path=='/cart' },
    { text: '我的',icon:'contact',path:'/about',disabled:route.path=='/about' },
    { text: '登录',icon:'user-o',path:'/login',disabled:route.path=='/login'},
    { text: '分类',icon:'label-o',path:'/search',disabled:route.path=='/search'},
]

const onSelect = (action:any) => {
    router.push(action.path)
}
</script>


<template>
    <van-nav-bar
    :fixed="true"
    :placeholder="true"
    @click-left="onClickLeft"
    >
        <template #title>
            {{ title }}
        </template>
        <template #left>
            <slot>
                <div v-if="visible">
                    <van-icon name="arrow-left"/>
                    <span>返回</span>
                </div>
            </slot>
        </template>
        <template #right>
            <div v-if="visib">
                <van-popover 
                v-model:show="showPopover" 
                :actions="actions" 
                placement="bottom-end"
                @select="onSelect">
                    <template #reference>
                        <van-icon name="ellipsis" />
                    </template>
                </van-popover>
            </div>
        </template>
    </van-nav-bar>
</template>